<template>
	<div class="system-add-user-container">
		<el-dialog title="新增管理员" v-model="isShowDialog" width="769px" @close="onCancel" destroy-on-close>
			<el-form :model="ruleForm" size="default" :rules="rules" ref="ruleForms" label-width="90px">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="账号" prop="userName">
							<el-input v-model="ruleForm.userName" placeholder="请输入用户名" clearable></el-input>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="手机号" prop="phone">
							<el-input v-model="ruleForm.phone" placeholder="请输入手机号" clearable></el-input>
						</el-form-item>
					</el-col>


					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="姓名" prop="realName">
							<el-input v-model="ruleForm.realName" placeholder="请输入真实姓名" clearable></el-input>
						</el-form-item>
					</el-col>

				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit(ruleForms)" size="default">新 增</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { reactive, ref, toRefs, onMounted, defineComponent } from 'vue';
import { useUserInfo } from '/@/stores/userInfo'
import { useTableInfo } from '/@/stores/ztable'
import { ElMessage } from 'element-plus'
import zpublic from "/@/utils/public.ts"
import type { FormInstance, FormRules } from 'element-plus'
// 定义接口来定义对象的类型
interface DeptData {
	deptName: string;
	createTime: string;
	status: boolean;
	sort: number | string;
	describe: string;
	id: number;
	children?: DeptData[];
}
interface UserState {
	isShowDialog: boolean;
	ruleForm: {
		userName: string;
		phone: string;
		realName: string;
	};
	deptData: Array<DeptData>;
}

export default defineComponent({
	name: 'systemAddUser',
	setup() {
		const { registered, getSysUserInfo } = useUserInfo()
		let useTableInfos = useTableInfo()
		const state = reactive<UserState>({
			isShowDialog: false,
			ruleForm: {
				userName: '', // 账户名称
				phone: '', // 手机号
				realName: ''
			},
			deptData: [], // 部门数据
		});

		const ruleForms = ref()
		let rules = <any>reactive({
			...zpublic.rules
		})
		// 打开弹窗
		const openDialog = () => {
			state.isShowDialog = true;
		};
		// 关闭弹窗
		const closeDialog = () => {
			useTableInfos.zTableFunAddShow = false
			state.isShowDialog = false;
		};
		// 取消
		const onCancel = () => {
			state.ruleForm = {
				userName: '', // 账户名称
				phone: '', // 手机号
				realName: ''
			}
			closeDialog();
		};
		// 新增
		const onSubmit = async (formEl: FormInstance | undefined) => {
			if (!formEl) return
			await formEl.validate(async (valid, fields) => {
				if (valid) {
					const { code, msg } = await registered(state.ruleForm)
					if (code == 200) {
						await useTableInfos.getTableData()
						closeDialog();
						ElMessage.success(msg || "新增成功")
					} else {

						ElMessage.error(msg || "新增失败")
					}
				} else {
					console.log('error submit!', fields)
				}
			})
		}

		// 页面加载时
		onMounted(() => {

		});
		return {
			openDialog,
			closeDialog,
			onCancel,
			onSubmit,
			ruleForms,
			rules,
			...toRefs(state),
		};
	},
});
</script>
